// 运维首页 待办任务列表
import type { tableListType, tableListDataItemType } from './typings'
import type { MyToDoStateType } from '~/pages/oam/toDo/typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import { defineComponent, reactive, ref, watch } from 'vue'
import { ElLink, ElRow } from 'element-plus'
import ProSaasTable from '~/components/ProSaasTable'
import AliIcon from '~/components/AliIocn'
import styles from '~/pages/oam/index.module.scss'

export default defineComponent({
  name: 'TableList',
  props: {
    orderToDo: {
      type: Boolean,
      default: true
    }
  },
  emits: ['toDoDetail'],
  setup(props, { expose, emit }) {
    // 初始值
    const proSaasTableRef = ref<ProSaasTableExposeType>()

    const toDoState = reactive<MyToDoStateType>({
      activeTabKey: 'agency',
      visible: false
    })
    const state = reactive<tableListType>({
      // 要传的key值
      current: 1,
      size: 10,
      processDefinitionKey: 'product_order' // 默认是工单
    })

    const columns: TableColumnProps<tableListDataItemType>[] = [
      {
        label: '标题',
        prop: 'taskTitle',
        minWidth: 180,
        fixed: 'left',
        showOverflowTooltip: true,
        align: 'center'
      },
      {
        label: '发起人',
        prop: 'submitUserName',
        minWidth: 180,
        align: 'center'
      },
      {
        label: '发起时间',
        prop: 'taskCreateTime',
        minWidth: 180,
        align: 'center'
      },
      {
        label: '当前处理内容',
        prop: 'taskName',
        minWidth: 180,
        align: 'center'
      },
      {
        label: '时间',
        prop: 'remainingTime',
        minWidth: 180,
        align: 'center'
      },
      {
        label: '操作',
        prop: 'options',
        minWidth: 180,
        fixed: 'right',
        align: 'center',
        render: ({ row }) => {
          return (
            <ElLink type="primary" onClick={() => handleChangeOptionsVisible(row)}>
              <ElRow>
                <div class={styles['tableColumn-look']}>
                  <AliIcon type="icon-chakan" />
                </div>
                &nbsp;&nbsp;查看
              </ElRow>
            </ElLink>
          )
        }
      }
    ]

    watch(
      () => props.orderToDo,
      () => {
        if (props.orderToDo) {
          // 要传的key值
          state.processDefinitionKey = 'product_order' // 工单
        } else {
          state.processDefinitionKey = 'product_patrol' // 巡视
        }
      }
    )

    watch(
      () => state.processDefinitionKey,
      (count, prevCount) => {
        if (count !== prevCount) {
          setTimeout(() => {
            refreshProSaasTable()
          })
        }
      }
    )

    // methods
    // 查看 切换我的待办查看弹框
    const handleChangeOptionsVisible = (row?: tableListDataItemType) => {
      toDoState.visible = true
      // console.log('toDoState.visible: ', toDoState.visible);
      // if (!toDoState.visible) refreshProSaasTable() // 刷新待办任务列表
      emit('toDoDetail', toDoState.visible, row, toDoState.activeTabKey)
    }

    // 刷新待办任务列表
    const refreshProSaasTable = () => {
      proSaasTableRef.value?.toSearch()
    }

    expose({ refreshProSaasTable })

    return () => (
      // !toDoState.visible
      //   ? (
      <ProSaasTable<tableListDataItemType>
        ref={proSaasTableRef}
        columns={columns}
        searchParams={{ processDefinitionKey: state.processDefinitionKey }}
        dispatchType="toDo/GetTodoList" // 待办列表
      />
    )
    // ) : (
    // <MyToDoOptions
    //   selectedKey={toDoState.activeTabKey}
    //   selectedValue={'待办'}
    //   visible={toDoState.visible}
    //   record={toDoState.record!}
    //   cancel={handleChangeOptionsVisible}
    // />
    // )
  }
})
